<template>
  <view class="work-order-detail">

    <view class="card-container">
      <view class="case-num">
        <view
          >工单编号:{{ data?.no }}
          <image
            class="copy"
            src="../../static/images/icon_copy.png"
            @click="copyNo(data?.no)"
          ></image>
        </view>
        <view class="state"> {{ getValueName('WO.STATUS', data?.status) }}</view>
      </view>
      <view class="tag-container">
        <!-- 1是安装 2是维修 3是养护 -->
        <view class="card-tag-green">{{ woType == '1' ? '安' : woType == '2' ? '维' : '养' }}</view>
        <view class="card-tag-orange" v-if="data.numberOfReminders >= 0">
          {{ data.numberOfReminders > 0 ? '催单X' + data.numberOfReminders : '催单' }}
        </view>
      </view>
    </view>

    <view class="card-container">
      <view class="contact-info">
        <view class="row-container">
          <view class="row-container-title"> 联系人</view>
          <view class="row-container-content"> {{ data?.contactName }}</view>
        </view>
        <view class="row-container">
          <view class="row-container-title"> 联系电话</view>
          <view class="row-container-content"> {{ data?.contactPhone }}</view>
        </view>
        <view class="row-container">
          <view class="row-container-title"> 服务地址</view>
          <view class="row-container-content"> {{ data?.address }}</view>
        </view>
        <view class="row-container">
          <view class="row-container-title"> 期望时间</view>
          <view
            class="row-container-content"
            v-if="data.requiredServiceTime && data.requiredServiceTimeRemark"
          >
            {{ data?.requiredServiceTime + ' ' + data?.requiredServiceTimeRemark }}
          </view>
        </view>
        <view class="row-container">
          <view class="row-container-title"> 服务需求</view>
          <view class="row-container-content"> {{ data?.description }}</view>
        </view>
        <view class="row-container" v-if="data.appointmentTime && data.appointmentTimeRemark">
          <view class="row-container-title-red"> 预约时间</view>
          <view class="row-container-title-red">
            {{ data?.appointmentTime + ' ' + data?.appointmentTimeRemark }}
          </view>
        </view>
      </view>
    </view>
    <view class="card-container">
      <view class="engineer-info" v-for="(item, index) in data.engineers" :key="index">
        <view class="row-container-title">
          <text>工程师: {{ item.engineerName }}</text>
          <text v-if="item.mainFlag == 1 && data.woType == '1'" class="badge">主工程师</text>
        </view>
        <text class="row-container-title">分配比例: {{ item.proportion + '%' }}</text>
      </view>
    </view>

    <view class="card-container">
      <view class="title">产品信息</view>
      <view class="diviler"></view>
      <view>
        <view v-for="(item, index) in data?.assetList" :key="item.id">
          <view class="product-item">
            <view class="row-container-between">
              <view class="form-title"> {{ '产品' + (index + 1) }}</view>
              <image
                class="image_edit"
                src="../../static/images/icon_mine_edit.png"
                @click="editAsset(item)"
              ></image>
            </view>
            <view class="row-container">
              <view class="row-container-title"> 产品分类</view>
              <view class="row-container-title">
                {{ item.productType }}
              </view>
            </view>
            <view class="row-container">
              <view class="row-container-title"> 产品名称</view>
              <view class="row-container-content"> {{ item.productName }} </view>
            </view>
            <view class="row-container">
              <view class="row-container-title"> 条形码</view>
              <view class="row-container-title"> {{ item.serialNumber }}</view>
            </view>
            <view class="row-container">
              <view class="row-container-title"> 数量</view>
              <view class="row-container-title"> {{ item.quantity }}</view>
            </view>
            <view class="row-container">
              <view class="row-container-title"> 购买日期</view>
              <view class="row-container-title"> {{ item.purchaseDate }}</view>
            </view>
            <view class="row-container">
              <view class="row-container-title"> 购买凭证</view>

            </view>
            <!-- 故障列表 当前是待完工状态的时候隐藏 -->
            <view style="margin-top: 20rpx" v-if="woType == '2'">
              <view class="row-container-between">
                <view class="title">故障信息</view>
                <!-- <nut-button size="small" style="margin-right: 10px" type="primary" :plain="true"
                  @click="addFaults(item.faultList)">添加故障</nut-button> -->
                <image
                  class="image_edit_end"
                  src="../../static/images/icon_add.png"
                  @click="addFaults(item.faultList)"
                  :disabled="woStatus != '2'"
                >
                </image>
              </view>
              <view
                class="container-border"
                v-for="(fault, faultIndex) in item.faultList"
                :key="fault.id"
              >
                <view class="row-container-between">
                  <view></view>
                  <view>
                    <image
                      class="image_edit_space"
                      src="../../static/images/icon_mine_edit.png"
                      @click="
                        editAssetFault({
                          ...fault,
                          faultId: fault.id,
                          woId: nowWoId,
                          woAssetId: item.woAssetId,
                          bigCategoryCode: item.bigCategoryCode,
                          mdCategoryCode: item.mdCategoryCode,
                          smCategoryCode: item.smCategoryCode,
                        })
                      "
                    ></image>
                    <image
                      class="image_edit_space"
                      src="../../static/images/icon_delete_line.png"
                      @click="deleteAssetFaultConfirm(item.faultList, faultIndex)"
                    ></image>
                  </view>
                </view>
                <view class="row-container">
                  <view class="row-container-title"> 故障大类</view>
                  <view class="row-container-title"> {{ fault.faultBigCategoryName }}</view>
                </view>
                <view class="row-container">
                  <view class="row-container-title"> 故障小类</view>
                  <view class="row-container-title"> {{ fault.faultSmCategoryName }}</view>
                </view>
                <view class="row-container">
                  <view class="row-container-title"> 故障描述</view>
                  <view class="row-container-title"> {{ fault.remark }}</view>
                </view>
                <view class="row-container">
                  <view class="row-container-title"> 服务措施</view>
                  <view class="row-container-title"> {{ fault.serviceMeasuresName }}</view>
                </view>
                <view class="row-container-space">
                  <!-- <view @click="getInstructions('1','1')">指导说明书</view> -->
                  <view class="row-contain-space">
                    <view @click="toggleInstructions(index, faultIndex, assetList)"
                      >指导说明书</view
                    >
                  </view>

                  <view
                    :style="faultColor(fault.faultBigCategoryName)"
                    @click="
                      addWopart({
                        ...fault,
                        productType: item.productType,
                        woId: nowWoId,
                        woAssetId: item.woAssetId,
                        productName: item.productName,
                        faultBigCategoryName: fault.faultBigCategoryName,
                      })
                    "
                    >添加备件</view
                  >
                  <view
                    @click="
                      scanWopart({
                        woId: nowWoId,
                        woAssetId: item.woAssetId,
                        productName: item.productName,
                        faultBigCategoryName: fault.faultBigCategoryName,
                        faultSmCategoryName: fault.faultSmCategoryName,
                      })
                    "
                    >查看备件</view
                  >
                </view>
                <instructions_panel :show-instructions="fault.showInstructions">
                  <view>
                    <view class="instrolcontainer" v-for="(item, index) in instructionsList">
                      <view class="item">
                        <text class="title">{{ item.faultReasonDesc }}</text>
                        <text class="detail">排查方法: {{ item.checkMethod }}</text>
                        <text class="detail">服务动作: {{ item.serviceAction }}</text>
                        <text class="detail">推荐部件: {{ item.recommendComp }}</text>
                      </view>
                    </view>
                  </view>
                </instructions_panel>
              </view>
            </view>

            <view class="divider" v-if="index < data?.assetList.length - 1" />
          </view>
        </view>
      </view>
      <nut-empty v-if="false" description="无产品数据"></nut-empty>
    </view>
    <!--    添加工单投诉部分-->

    <view class="card-container" v-if="data?.serviceStatus > 2">
      <view class="title">关联单据</view>
      <view class="contact-info">
        <view class="contact-item" v-for="i in data?.relaList" :key="i.id">
          <text>工单编号: ZTS240607001 <uni-tag text="单据状态" type=""></uni-tag></text>
          <text>单据类型: 特殊费用申请</text>
        </view>
        <nut-empty v-if="false" description="无关联单据"></nut-empty>
      </view>
    </view>

    <view class="card-container" v-if="data?.serviceStatus >= 4">
      <view class="service-file">
        <view class="">
          <view>整体空间照片：</view>
          <image src="" mode="" @click="previewImage('')"></image>
        </view>
        <view class="">
          <view>产品照片：</view>
          <image src="" mode=""></image>
        </view>
        <view class="">
          <view>新旧产品合照：</view>
          <image src="" mode=""></image>
        </view>
        <view class="">
          <view>条形码：</view>
          <image src="" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 特殊工单按钮 -->

    <view class="card-container">
      <view class="title" @click="showModal">工单投诉</view>
    </view>
    <view class="special-btn">
      <view class="btn-circle">
        <text
          class="iconfont icon-file"
          style="font-size: 48rpx; color: #43946c"
          @click="showSpecialMenu = true"
        ></text>
      </view>
    </view>

    <!-- 特殊工单弹窗 -->
    <view v-if="showSpecialMenu" class="special-menu-mask">
      <view class="special-menu-content animate-slide-up">
        <view class="menu-header">
          <text class="menu-title">特殊工单处理</text>
          <text class="iconfont icon-close" @click="showSpecialMenu = false"></text>
        </view>
        <view class="menu-grid">
          <view
            v-for="(item, index) in filteredMenuItems"
            :key="index"
            class="menu-item"
            :class="['menu-item-active']"
            @click="handleSpecialItem(item.type)"
          >
            <text
              :class="['iconfont', `icon-${item.icon}`]"
              style="font-size: 48rpx; color: #43946c"
            ></text>
            <text class="item-name">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="card-container">
      <view class="asset-files">
        <view v-for="item in assetList" :key="item.woAssetId">
          <!-- 购买凭证 -->
          <view class="file-section">
            <view class="section-title">购买凭证</view>
            <view class="file-list">
              <view
                v-for="file in fileListsMap[`${item.woAssetId}-1`]"
                :key="file.fileId"
                class="file-item"
              >
                <img :src="file.url" :alt="file.name" @click="previewImage(file.url)" />
              </view>
            </view>
          </view>

          <!-- 故障照片 -->
          <view class="file-section">
            <view class="section-title">故障照片</view>
            <view class="file-list">
              <view
                v-for="file in fileListsMap[`${item.woAssetId}-2`]"
                :key="file.fileId"
                class="file-item"
              >
                <img :src="file.url" :alt="file.name" @click="previewImage(file.url)" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>


    <order-complaints-create
      v-model="showComplaint"
      :order-id="data?.id"
      @submit="handleComplaintSubmit"
    />
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import { computed, reactive, ref } from 'vue'
import { getNamesValues, getValueName } from '@/utils/nameValues'
import {
  getWoRelatedList,
  serviceProviderGetWoList,
  woAssetList,
  getWoEngineerList,
  woInfo,
  getAssetFaults,
  addAssetFault,
  updateAssetFault,
  deleteAssetFault,
  submitCompletion,
  FaultReasonList,
  returnFile,
} from '@/services/case'
import instructions_panel from '@/pages/mycase/components/instructions_panel.vue'
import { getCurrentInstance } from 'vue'
// import { computed, reactive, ref } from 'vue'
// 是否数据加载完毕
const statusBarHeight = ref(0)

const isFinish = ref(false)
const instructionsList = ref([])
interface FileItem {
  url: string
  fileName: string
  fileId: string
}
interface SpecialMenuItem {
  name: string
  icon: string
  type: string
  path: string
}
interface WoAssetItem {
  woAssetId: string | number
}

const fileListsMap = reactive<Record<string, any[]>>({})
// 是否数据加载完毕
const data: any = ref({})
const nowWoId: any = ref({})
const activeName = ref(1)
//工单类型 1是安装工单 2是维修工单 3是保养工单
const woType = ref('1')
let assetList = ref('')
//投诉工单管理
const showComplaint = ref(false)
const title = reactive({
  title1: '标题1',
  title2: '标题2',
})
// 跳转页面
function jumpPage(url: string) {
  uni.navigateTo({
    url,
  })
}
/* start */
const previewImage = (url: string) => {
  uni.previewImage({
    urls: [url],
    current: url,
  })
}

// 添加响应式数据
const showSpecialMenu = ref(false)

const specialMenuItems = ref<SpecialMenuItem[]>([
  {
    name: '保外转保内',
    icon: 'exchange',
    type: 'warranty',
    path: '/pages/mycase/components/PreserveOutsideToInside',
  },
  {
    name: '非常规费用',
    icon: 'money-bill-wave',
    type: 'special_fee',
    path: '/pages/specialRequest/nonStandardFees/new-ticket/new-ticket',
  },
  {
    name: '小额赔付',
    icon: 'hand-holding-usd',
    type: 'compensation',
    path: '/pages/specialRequest/ smallClaimsPayment/new-ticket/new-ticket',
  },
  {
    name: '转鉴定',
    icon: 'search',
    type: 'appraisal',
    path: '/pages/specialRequest/appraisalProcess/ticketEdit/ticketEdit',
  },
  {
    name: '事故处理',
    icon: 'exclamationtriangle',
    type: 'accident',
    path: '/pages/specialRequest/incidentHandling/new-ticket/new-ticket',
  },
  {
    name: '定制备件申请',
    icon: 'tools',
    type: 'custom_parts',
    path: '/pages/specialRequest/customPartsRequest/new-ticket/new-ticket',
  },
])

// 添加计算属性
const showSpecialButton = computed(() => {
  const status = data.value?.status
  // 状态为 4,5,6,12,99 时显示按钮
  return ['4', '5', '6', '12', '99'].includes(status)
})

const filteredMenuItems = computed(() => {
  console.log(data.value?.status, 'data.value')
  const status = data.value?.status
  if (['4', '5', '6', '12', '99'].includes(status)) {
    if (status === '6') {
      // 待完工状态显示：保外转保内、转鉴定、定制备件申请,非常规费用、小额赔付、事故处理
      return specialMenuItems.value.filter((item) =>
        [
          'warranty',
          'appraisal',
          'custom_parts',
          'special_fee',
          'compensation',
          'accident',
        ].includes(item.type),
      )
    } else {
      // 派单之后的状态（4,5,12,99）显示：非常规费用、小额赔付、事故处理
      return specialMenuItems.value.filter((item) =>
        ['special_fee', 'compensation', 'accident'].includes(item.type),
      )
    }
  }
  return []
})

// 添加处理方法
const handleSpecialItem = (type: string) => {
  const path = specialMenuItems.value.find((item) => item.type === type)?.path
  if (path) {
    uni.navigateTo({
      url:
        path +
        '?update=' +
        JSON.stringify(data.value) +
        '&assetList=' +
        JSON.stringify(assetList.value),
    })
  } else {
    console.error(`No path found for type: ${type}`)
  }
  showSpecialMenu.value = false
}

/**
 * uni.setClipboardData方法就是讲内容复制到粘贴板
 */
function copyNo(value: string) {
  uni.setClipboardData({
    data: value, //要被复制的内容
    success: () => {
      //复制成功的回调函数
      uni.showToast({
        //提示
        title: '复制成功',
      })
    },
  })
}
const toggleInstructions = (index, faultIndex, value) => {
  let instructions = assetList.value[index].faultList[faultIndex]
  getInstructions(
    assetList.value[index].smCategoryCode,
    instructions.faultSmCategoryName,
    index,
    faultIndex,
  )
}
//测试弹窗测试
const showModal = () => {
  console.log('测试弹窗')
  showComplaint.value = true
}

const selectPcWoCaseInfoList = async (data: WoAssetItem[]) => {
  console.log('调用333')
  const res2 = await returnFile({
    module: 2,
    bizType: 202,
    bizSubType: '',
    bizId: '1519',
  })
  console.log(res2, '测试图片打印123')
  const filedic = [
    { bizSubType: 1, bizCode: 'WO_ASSET' }, // 购买凭证
    { bizSubType: 2, bizCode: 'WO_ASSET_PHOTO' }, // 故障照片
  ]
  const promises = data.flatMap((item) =>
    filedic.map(async (file) => {
      const key = `${item.woAssetId}-${file.bizSubType}`
      try {
        const res = await returnFile({
          module: 2,
          bizType: 202,
          bizSubType: file.bizSubType,
          bizId: item.woAssetId,
        })

        if (res && Array.isArray(res)) {
          fileListsMap[key] = res.map((fileItem: FileItem) => ({
            url: fileItem.url,
            status: 'success',
            message: 'uploaded',
            type: 'image',
            name: fileItem.fileName,
            fileId: fileItem.fileId,
          }))
        } else {
          console.log(`No files found for woAssetId: ${item.woAssetId}, type: ${file.bizCode}`)
          fileListsMap[key] = []
        }
      } catch (error) {
        console.error(
          `Error fetching files for ${file.bizCode} (woAssetId: ${item.woAssetId}):`,
          error,
        )
        fileListsMap[key] = []
      }
    }),
  )

  await Promise.all(promises)
  return fileListsMap
}
// 刷新页面数据
const refreshPageData = async () => {
  if (data.value?.id) {
    const res = await selectPcWoCaseInfoList([{ woId: data.value.id }])
    if (res?.[0]) {
      data.value = res[0]
    }
  }
}
// 页面加载
onLoad(async ({ woId = null }: any) => {
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 20
  console.log('woId', woId)
  // woId.value = woId
  if (woId) {
    //获取工单详情
    const res: any = await woInfo({ woId })
    console.log('res', res)
    woType.value = res.woType
    //获取工单资产
    const assetData: any = await woAssetList({ woId })
    console.log('assetData', assetData)
    assetList.value = assetData
    //获取工程师
    const engineers: any = await getWoEngineerList({ woId })
    console.log('enggineers', engineers)
    //获取关联单据
    const faultCategories = assetData.flatMap((item) =>
      item.faultList.map((fault) => ({
        faultBigCategoryName: fault.faultBigCategoryName,
        faultSmCategoryName: fault.faultSmCategoryName,
        woFaultId: fault.id,
      })),
    )
    if (faultCategories.length > 0) {
      uni.setStorageSync('faultCategories', faultCategories)
    } else {
      uni.removeStorageSync('faultCategories')
    }
    // console.log(faultCategories, 'faultCategories')
    data.value = {
      ...res,
    }
    data.value.assetList = assetData
    await selectPcWoCaseInfoList(assetData)
    data.value.assetList.forEach((asset) => {
      asset.faultList.forEach((fault) => {
        fault.showInstructions = false
      })
    })
    data.value.engineers = engineers
    nowWoId.value = woId

    isFinish.value = true
  }
  //订阅更新工单资产
  uni.$on('onUpdateAsset', () => {
    woAssetList({ woId }).then((assetData) => {
      data.value.assetList = assetData
    })
  })
})
onShow(async () => {
  if (getCurrentInstance()?.proxy?.needRefresh) {
    getCurrentInstance().proxy.needRefresh = false
    if (nowWoId.value) {
      try {
        await woInfo({ woId: nowWoId.value })
      } catch (error) {
        console.error('刷新工单数据失败:', error)
        uni.showToast({
          title: '刷新数据失败',
          icon: 'error',
        })
      }
    }
  }
})
onUnload(() => {
  uni.$off('onUpdateAsset')
})
/**
 * 编辑工单资产
 */
function editAsset(data: any) {
  console.log(data)
  uni.navigateTo({
    url:
      '/pages/mycase/page/caseAssetForm?data=' +
      JSON.stringify({ ...data, productCategory: data.productType }),
  })
}

/**
 * 编辑工单 资产 故障
 */
function editAssetFault(data: any) {
  console.log(data)
  uni.navigateTo({
    url: '/pages/mycase/page/caseAssetFaultForm?data=' + JSON.stringify(data),
  })
}

/**
 * 删除工单 资产 故障
 */
function deleteAssetFaultConfirm(faultList: [], index: number) {
  console.log(faultList)
  faultList[index].id
    ? uni.showModal({
        title: '确定要删除该故障信息?',
        success: (res) => {
          console.log(res)
          res.confirm
            ? deleteAssetFault({ woId: nowWoId.value, woAssetFaultId: faultList[index].id }).then(
                () => {
                  faultList.splice(index, 1)
                  uni.showToast({
                    //提示
                    title: '删除成功！',
                  })
                },
              )
            : console.log(33)
        },
      })
    : faultList.splice(index, 1)
}
//添加故障
function addFaults(faultList: any) {
  faultList.push({
    faultBigCategoryCode: '',
    faultBigCategoryName: '',
    faultSmCategoryCode: '',
    faultSmCategoryName: '',
    remark: '',
  })
}
/**
 * 添加备件
 */
function addWopart(data: any) {
  data.faultBigCategoryName
    ? uni.navigateTo({
        url: '/pages/mycase/page/caseAssetPartForm?data=' + JSON.stringify(data),
      })
    : console.log('zzzz')
}
/**
 * 查看备件
 */
function scanWopart(data: any) {
  console.log(data, 'data')
  uni.navigateTo({
    url: '/pages/mycase/page/caseAssetPartList?data=' + JSON.stringify(data),
  })
}
/**
 * 提交工单
 */
const subMitServie = () => {
  // let woId = data.value.id
  // uni.showModal({
  //   title: '确认提交此工单吗?',
  //   success: async (res) => {
  //     console.log(res)
  //     try {
  //       let res1 = await submitCompletion({ woId })
  //       console.log(res1, 'success')
  //
  //     } catch (e) {
  //       console.log(e, 'error')
  //     }
  //   },
  // })

  uni.navigateTo({
    url:
      '/pages/mycase/page/completeDetail/completeDetail?data=' +
      JSON.stringify(assetList.value) +
      '&&woid=' +
      nowWoId.value +
      '&&fix=' +
      woType.value,
  })
}
/**
 * 提交工单
 */
const faultColor = (data: string) => {
  return data ? 'color:#54B9CC' : 'color:grey'
  // return data.value.assetList.some(asset => asset.faultList.some(fault => fault.faultBigCategoryCode !== '')) ? 'red' : 'black'
}

const getInstructions = (
  productSmCategoryCode: string,
  faultSmCategoryName: string,
  index: number,
  faultIndex: number,
) => {
  if (instructionsList.value) {
    FaultReasonList({
      productSmCategoryCode: productSmCategoryCode,
      faultSmCategoryName: faultSmCategoryName,
    }).then((res: any) => {
      if (res.length > 0) {
        console.log(res)
        assetList.value[index].faultList[faultIndex].showInstructions =
          !assetList.value[index].faultList[faultIndex].showInstructions
        instructionsList.value = res
      } else {
        uni.showToast({
          title: '暂未查询说明',
          icon: 'none',
          duration: 2000,
        })
      }
    })
  } else {
    !assetList.value[index].faultList[faultIndex].showInstructions
  }
}

// 处理投诉提交
const handleComplaintSubmit = async (formData) => {
  try {
    // TODO: 调用投诉提交接口
    const res = await uni.request({
      url: '/api/complaints/create',
      method: 'POST',
      data: {
        ...formData,
        workOrderId: data.value?.id,
      },
    })

    if (res.statusCode === 200) {
      uni.showToast({
        title: '投诉提交成功',
        icon: 'success',
      })
      showComplaint.value = false
    } else {
      throw new Error('提交失败')
    }
  } catch (error) {
    uni.showToast({
      title: '提交失败，请重试',
      icon: 'none',
    })
  }
}
</script>

<style lang="scss">
.work-order-detail {
  background-color: #f8f8f8;
  padding-bottom: 70rpx;
}
.instrolcontainer {
  padding: 20px;
  display: flex;
  .item {
    //margin-bottom: 20px;
    //border: 1px solid #ccc;
    padding: 10px;
    flex-direction: column;
    border-radius: 5px;
    justify-content: center;
    //align-items: center;
    display: flex;
    background-color: #f9f9f9;
  }

  .title {
    font-weight: bold;
    margin-bottom: 10px;
  }

  .detail {
    display: inline;
    margin-bottom: 5px;
  }
  .divider {
    border-top: 1px solid #f5f5f5;
    margin-top: 20rpx;
  }
}

.card-container {
  position: relative;
  padding: 25rpx;
  margin: 20rpx 20rpx 0;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

  .title {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 32upx;
    font-weight: bold;
    color: black;
  }

  .diviler {
    height: 2rpx;
    margin-top: 20rpx;
    background-color: #f8f8f8;
  }
}

.row-contain-space {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.instructions-panel {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
}

.instructions-panel.open {
  min-height: 500px; /* 根据实际内容调整高度 */
}

.fade-enter-active,
.fade-leave-active {
  transition: max-height 0.3s ease-in-out;
}

.fade-enter,
.fade-leave-to {
  max-height: 0;
}

.fade-enter-to,
.fade-leave {
  min-height: 500px; /* 根据实际内容调整高度 */
}

.case-num {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 28upx;
  color: #333;
}

.state {
  font-size: 28rpx;
  color: #f05b47;
  font-weight: 500;
}

.square {
  height: 48rpx;
  line-height: 48rpx;
  padding-left: 40rpx;
  padding-right: 20rpx;
  text-align: center;
  vertical-align: middle;
  position: relative;
  background-color: #54B9CC;
  font-size: 24upx;
  color: white;
}

.square:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 24rpx solid white;
  border-top: 24rpx solid transparent;
  border-bottom: 24rpx solid transparent;
}

.tag-container {
  display: flex;
  flex-direction: row;
  font-size: 28upx;
  color: #333;
  margin-top: 10rpx;

  .card-tag {
    min-width: 45rpx;

    &-green {
      height: 45rpx;
      width: 45rpx;
      line-height: 45rpx;
      background-color: #54B9CC;
      border-radius: 45rpx;
      color: #fff;
      font-size: 20rpx;
      text-align: center;
      vertical-align: center;
      margin-right: 14rpx;
    }

    &-orange {
      height: 45rpx;
      background-color: #f7c84c;
      border-radius: 45rpx;
      line-height: 45rpx;
      color: #fff;
      vertical-align: center;
      font-size: 20rpx;
      padding-left: 10rpx;
      padding-right: 10rpx;
      text-align: center;
      margin-right: 14rpx;
    }
  }
}

.copy {
  width: 25rpx;
  height: 25rpx;
  margin-left: 10rpx;
}

.image_edit {
  width: 40rpx;
  height: 40rpx;
}

.image_edit_space {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.image_edit_end {
  width: 40rpx;
  height: 40rpx;
  justify-content: flex-end;
}

.common-content {
  margin-top: 5rpx;
  color: gray;
}

.contact-info {
  line-height: 35rpx;
  display: flex;
  flex-flow: column;
}

.engineer-info {
  line-height: 35rpx;
  display: flex;
  justify-content: space-between;
  flex-flow: row;

  .engineer-contanr-content {
    color: gray;
  }

  .badge {
    display: inline-block;
    padding: 4rpx 10rpx 2rpx 14rpx;
    margin: 0 10rpx;
    font-size: 22upx;
    color: #54B9CC;
    border-radius: 35rpx;
    border: 1rpx solid #54B9CC;
    background-color: #defff4;
  }
}

.product-item {
  display: flex;
  flex-flow: column;
  margin: 20rpx 10rpx;
  line-height: 35rpx;

  &-1 {
    display: flex;
    justify-content: space-between;
  }
}

.form-title {
  color: #333;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
}

.row-container-between {
  padding: 10rpx 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.row-container-space {
  padding: 10rpx 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  color: #54B9CC;
  font-size: 30upx;
  margin: 15rpx 0;
  font-weight: bold;
}

.row-container {
  display: flex;
  flex-direction: row;
  margin-top: 10rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.row-container-title {
  line-height: 1.6;
  min-width: 150rpx;
  font-size: 28upx;
  color: #5b5b5b;
}

.row-container-title-red {
  line-height: 1.6;
  min-width: 150rpx;
  font-size: 28upx;
  color: #f05b47;
}

.row-container-content {
  line-height: 1.6;
  font-size: 28upx;
  color: #666;
}

.container-border {
  padding: 15rpx;
  // border: 2rpx solid #4EE1AB;
  margin-top: 20rpx;
  border-radius: 14rpx;
  background-color: #eff8f5;
  // box-shadow: 1px 1px 1px #DEFFF4;
}

.contact-item {
  display: flex;
  flex-flow: column;
  line-height: 35rpx;
}

.service-file {
  image {
    margin: 10rpx;
    width: 100rpx;
    height: 100rpx;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  padding: 10rpx;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

  .button-grop {
    display: flex;
    flex-flow: row wrap;
    margin: 5rpx;
    justify-self: center;

    .button-operate {
      margin-right: 10rpx;
    }
  }
}

.asset-files {
  padding: 16px;
}

.file-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}

.file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.file-item {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
}

.file-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.special-btn {
  position: fixed;
  right: 30rpx;
  bottom: 180rpx;
  z-index: 99;

  .btn-circle {
    width: 90rpx;
    height: 90rpx;
    background-color: #4ee1ab;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);

    .iconfont {
      color: #fff;
      font-size: 40rpx;
    }
  }
}

.special-menu-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: flex-end;

  .special-menu-content {
    width: 100%;
    background-color: #fff;
    border-radius: 24rpx 24rpx 0 0;
    padding: 30rpx;

    .menu-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;

      .menu-title {
        font-size: 32rpx;
        font-weight: 500;
      }

      .iconfont {
        font-size: 36rpx;
        color: #999;
      }
    }

    .menu-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
      padding-bottom: 30rpx;

      .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20rpx;
        background-color: #ffffff;
        border-radius: 16rpx;

        &-active {
          background-color: rgba(78, 225, 171, 0.1);
          color: #4ee1ab;

          &:active {
            background-color: rgba(78, 225, 171, 0.2);
          }
        }

        .iconfont {
          font-size: 48rpx;
          margin-bottom: 10rpx;
        }

        .item-name {
          font-weight: bold;
          color: #43946c;
          font-size: 24rpx;
        }
      }
    }
  }
}
.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}
@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
}
</style>
